<template>
  <MainContainer class="p-5">
    <div class="flex">
      <el-button type="primary" @click="openDialog()">+添加分类</el-button>
    </div>
    <MyTable
      v-loading="loading"
      class="my-2"
      :data="list"
      :columns="columns"
      :is-show-selection="false"
    ></MyTable>
    <el-pagination
      v-model:currentPage="params.page"
      v-model:page-size="params.limit"
      :page-sizes="[10, 20, 50, 100]"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      class="justify-end"
      @size-change="handleQuery"
      @current-change="handleQuery"
    />
    <MyFormDialog
      v-model:visible="dialogVisible"
      v-model:formData="formData"
      :title="dialogTitle"
      :options="createFormOptions"
      :loading="loading"
      @confirm="handleConfirm"
    ></MyFormDialog>
  </MainContainer>
</template>
<script lang="jsx" setup>
import useCRUD from "@/composables/useCRUD.js";
import MainContainer from "@/components/MainContainer.vue";
import MyFormDialog from "@/components/MyFormDialog.vue";
import MyTable from "@/components/MyTable.vue";
import {
  getCustomFormCategory,
  createCustomFormCategory,
  deleteCustomFormCategory,
  updateCustomFormCategory,
  getCustomFormCategoryById,
} from "@/api/footform/custom-form";
import parseTime from "@/utils/parseTime.js";
import { ElMessage, ElMessageBox } from "element-plus";

const createFormOptions = [
  {
    prop: "name",
    label: "分类名称",
    rules: {
      required: true,
      message: "必填",
    },
  },
];

const columns = [
  {
    prop: "name",
    label: "分类名称",
  },
  {
    prop: "createTime",
    label: "创建时间",
    formatter(row) {
      const date = new Date(row.createTime);
      return parseTime(date);
    },
  },
  {
    label: "操作",
    prop: "action",
    minWidth: 100,
    customRender(row) {
      return (
        <div>
          <el-button
            link
            type="danger"
            onClick={async () => {
              await ElMessageBox.confirm("确认继续操作吗", "警告", {
                confirmButtonText: "确认",
                cancelButtonText: "取消",
                type: "warning",
              });
              const { message } = await handleDelete(row.id);
              ElMessage({ type: "success", message });
            }}
          >
            删除
          </el-button>
          <el-button
            class="!text-[#707bdf]"
            link
            onClick={() => openDialog(row.id)}
          >
            编辑
          </el-button>
        </div>
      );
    },
  },
];

const crudOptions = {
  queryApi: getCustomFormCategory,
  createApi: createCustomFormCategory,
  deleteApi: deleteCustomFormCategory,
  updateApi: updateCustomFormCategory,
  getOneApi: getCustomFormCategoryById,
};
const {
  params,
  handleQuery,
  list,
  loading,
  openDialog,
  formData,
  dialogVisible,
  handleDelete,
  dialogTitle,
  total,
  handleConfirm,
} = useCRUD(crudOptions);

handleQuery();
</script>
